<template>
  <div class="content-wrapper">
    <div class="nav">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/administration-rewardsList' }">奖惩动态</el-breadcrumb-item>
        <el-breadcrumb-item>力沃奖惩</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button type="primary" @click="synLRP">同步数据</el-button>
        <el-button type="primary" @click="ifSummary=!ifSummary">{{ifSummary ? '部门统计' : '汇总列表'}}</el-button>
      </div>
    </div>
    <div class="content" :class="{'none': !ifSummary}">
      <div class="search-bar">
        <div class="item"><el-input placeholder="按照名字模糊查询" prefix-icon="el-icon-search" v-model="searchData.userName" clearable style="width: 180px;"></el-input></div>
        <div class="item">
          <el-date-picker type="date" placeholder="选择日期" v-model="searchData.startTime" style="width: 180px;" value-format="yyyy-MM-dd"></el-date-picker>
          <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
          <el-date-picker type="date" placeholder="选择日期" v-model="searchData.endTime" style="width: 180px;" value-format="yyyy-MM-dd"></el-date-picker>
        </div>
        <div class="item">
          <el-select v-model="searchData.lrpStatus" placeholder="请选择发放状态" style="width: 100px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="待发放" value="0"></el-option>
            <el-option label="已发放" value="1"></el-option>
          </el-select>
        </div>
        <div class="item">
          <el-button @click="searchData=JSON.parse(searchDataInit)">重置</el-button>
          <el-button type="primary" @click="getRewardsList(true)">查询</el-button>
        </div>
      </div>
      <div class="main-content">
        <el-table :data="rewardsList" :height="(tableHeight-50)+'px'" style="width: 100%" border ref="rewardsTable">
          <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
          <el-table-column prop="userName" label="姓名" min-width="80" align="center"></el-table-column>
          <el-table-column prop="deptName" label="部门" min-width="120" align="center"></el-table-column>
          <el-table-column prop="lrpMoney" label="奖惩" min-width="100" align="center"></el-table-column>
          <el-table-column label="时间" min-width="120" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.lrpYear+'-'+scope.row.lrpMonth}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="lrpRemark" label="备注" min-width="200" align="center"></el-table-column>
          <el-table-column label="发放状态" min-width="100" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.lrpStatus === '0' ? '待发放' : '已发放'}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageConfig.pageIndex"
            :page-sizes="[10, 15, 20, 50, 100, 500]"
            :page-size="pageConfig.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageConfig.totalCount">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="content" :class="{'none': ifSummary}">
      <div class="search-bar">
        <div class="item"><el-input placeholder="按照名字模糊查询" prefix-icon="el-icon-search" v-model="searchDataByDepartment.userName" style="width: 180px;" clearable></el-input></div>
        <div class="item">
          <el-date-picker type="month" placeholder="选择月份" v-model="searchDataByDepartment.yearMonth" style="width: 180px;" value-format="yyyy-MM"></el-date-picker>
        </div>
        <div class="item">
          <el-button type="primary" @click="getDeptList">查询</el-button>
        </div>
      </div>
      <div class="main-content">
        <el-table :data="departmentList" :height="tableHeight+'px'" style="width: 100%" border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          row-key="id"
          lazy
          :load="getRewardsList2"
          ref="rewardsByDepartmentTable"
          :span-method="arraySpanMethod">
          <el-table-column prop="deptName" label="部门" min-width="100">
            <template slot-scope="scope">
              <span><span v-if="scope.row.children && scope.row.children.length === 0" style="width: 24px; display: inline-block;"></span>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="姓名" min-width="100" align="center"></el-table-column>
          <el-table-column prop="lrpMoney" label="奖惩" min-width="100" align="center"></el-table-column>
          <el-table-column label="时间" min-width="80" align="center">
            <template slot-scope="scope">
              <span v-if="!scope.row.pid">{{scope.row.lrpYear+'-'+scope.row.lrpMonth}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="lrpRemark" label="备注" min-width="240" align="center"></el-table-column>
          <el-table-column label="发放状态" min-width="100" align="center">
            <template slot-scope="scope">
              <span v-if="!scope.row.pid">{{scope.row.lrpStatus === '0' ? '待发放' : '已发放'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="getHistoryList(scope.row)" style="padding: 0;">历史记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      class="dialog-style"
      title="历史记录"
      :visible.sync="historyDialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="620px">
      <el-table
        :data="historyList"
        @row-click="showRewardsDetailDialog"
        height="300px"
        border
        style="width: 100%">
        <el-table-column prop="userName" label="姓名" min-width="100" align="center"></el-table-column>
        <el-table-column prop="deptName" label="部门" min-width="100" align="center"></el-table-column>
        <el-table-column prop="lrpMoney" label="奖惩" min-width="100" align="center"></el-table-column>
        <el-table-column prop="lrpAccountBalance" label="奖惩余额" min-width="100" align="center"></el-table-column>
        <el-table-column label="时间" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.lrpYear+'-'+scope.row.lrpMonth}}</span>
          </template>
        </el-table-column>
        <el-table-column label="发放状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.lrpStatus === '0' ? '待发放' : '已发放'}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      :title="form.userName+'奖惩详情'"
      :visible.sync="rewardsDatailDialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="520px">
      <div class="rewards-detail-wrapper">
        <div class="info">
          <div class="info-item"><span>部门：</span>{{form.deptName}}</div>
          <div class="info-item"><span>职位：</span>{{form.position}}</div>
          <div class="info-item"><span>工号：</span>{{form.jobNumber}}</div>
          <div class="info-item"><span>时间：</span>{{form.lrpYear}}-{{form.lrpMonth}}</div>
        </div>
        <div class="info">
          <div class="info-item"><span>奖惩金额：</span>{{form.lrpMoney}}</div>
          <div class="info-item"><span>用户账户奖惩余额：</span>{{form.lrpAccountBalance}}</div>
          <div class="info-item"><span>发放状态：</span>{{form.lrpStatus === '0' ? '待发放' : '已发放'}}</div>
        </div>
        <div class="info">
          <div class="info-item"><span>创建时间：</span>{{form.lrpCreateTime}}</div>
          <div class="info-item"><span>修改时间：</span>{{form.lrpModifyTime}}</div>
        </div>
        <div class="rows"><span>备注：</span>{{form.lrpRemark}}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import { treeDataTranslate } from '@/utils'
export default {
  data () {
    return {
      tableHeight: '',
      ifSummary: true,
      searchData: {
        lrpDingId: '',
        deptId: '',
        userName: '',
        yearMonth: '',
        lrpYear: '',
        lrpMonth: '',
        startTime: null,
        endTime: null,
        lrpStatus: '',
      },
      rewardsList: [],
      departmentList: [],
      pageConfig: {
        pageIndex: 1,
        pageSize: 15,
        totalCount: 0,
      },
      searchDataByDepartment: {
        userName: '',
        yearMonth: null,
        lrpYear: '',
        lrpMonth: '',
      },
      historyDialogVisible: false,
      historyList: [],
      rewardsDatailDialogVisible: false,
      form: {
        id: '',
        lrpDingId: '',
        userName: '',
        deptId: '',
        deptName: '',
        position: '',
        jobNumber: '',
        lrpRecordId: '',
        lrpType: '',
        lrpYear: '',
        lrpMonth: '',
        lrpMoney: '',
        lrpAccountBalance: '',
        lrpRemark: '',
        lrpCreateTime: '',
        lrpModifyTime: '',
        lrpStatus: '',
      }
    };
  },
  watch: {
    searchDataByDepartment: {
      handler() {
        this.getDeptList()
      },
      deep: true
    },
    searchData: {
      handler() {
        this.getRewardsList(true)
      },
      deep: true
    }
  },
  mixins: [dingMixin],
  computed: {
    hasLimit() {
      return JSON.parse(sessionStorage.getItem('menuId')).includes('1322095600507596802')
    }
  },
  mounted () {
    this.tableHeight = document.documentElement['clientHeight'] - 120
    window.onresize = () => {
      this.tableHeight = document.documentElement['clientHeight'] - 120
    }
    this.getCurMonth()
    this.searchDataInit = JSON.stringify(this.searchData)
    this.getRewardsList(true)
  },
  methods: {
    getCurMonth() {
      let date = new Date();
      let seperator = "-";
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      if (month >= 1 && month <= 9) {
          month = "0" + month;
      }
      this.searchDataByDepartment.yearMonth = year + seperator + month;
    },
    handleSizeChange(val) {
      this.pageConfig.pageSize = val;
      this.getRewardsList(true)
    },
    handleCurrentChange(val) {
      this.pageConfig.pageIndex = val;
      this.getRewardsList()
    },
    async getRewardsList(init) {
      if(init) this.pageConfig.pageIndex = 1
      let {list, totalCount} = await this.$httpN.postB('appraisal/lrpresultrecord/list', {
        page: this.pageConfig.pageIndex,
        limit: this.pageConfig.pageSize,
        userName: this.searchData.userName,
        startTime: this.searchData.startTime,
        endTime: this.searchData.endTime,
        lrpStatus: this.searchData.lrpStatus,
      })
      this.rewardsList = list
      if(init) this.pageConfig.totalCount = totalCount
    },
    async getDeptList() {
      this.departmentList = [];
      let curUserDeptPathArr = this.userInfo.deptPath.split(',')
      let curUserDeptId = curUserDeptPathArr.length >= 2 ? curUserDeptPathArr[curUserDeptPathArr.length-2] : ''

      let dept = await this.$httpN.postB('sys/dept/listAll')
      let firstArr = dept.filter(item => {
        item.idsArr = [item.id]
        return item.pid === '1'
      } )
      firstArr.forEach( item => item.hasChildren = true)
      this.departmentList = this.hasLimit ? firstArr : firstArr.filter(dept => dept.id === curUserDeptId)
    },
    async getRewardsList2(tree, treeNode, resolve) {
      let year = ''
      let month = ''
      if(this.searchDataByDepartment.yearMonth) {
        year = this.searchDataByDepartment.yearMonth.substring(0, 4);
        month = this.searchDataByDepartment.yearMonth.substring(5, 7);
      }
      let {list} = await this.$httpN.postB('appraisal/lrpresultrecord/list', {
        deptId: tree.id,
        userName: this.searchDataByDepartment.userName,
        lrpYear: year,
        lrpMonth: month,
        limit: 999,
      })
      resolve(list)
    },
    async getHistoryList(row) {
      let {list} = await this.$httpN.postB('appraisal/lrpresultrecord/list', {
        limit: 999,
        userName: row.userName,
        lrpDingId: row.lrpDingId,
      })
      this.historyList = list;
      this.historyDialogVisible = true;
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.pid) {
        return [1, 7];
        if(columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6) {
          return [0, 0]
        }
      }
    },
    async showRewardsDetailDialog(row, column, event) {
      this.form = await this.$httpN.postB('appraisal/lrpresultrecord/info', {id: row.id})
      this.rewardsDatailDialogVisible = true;
    },
    async synLRP() {
      if(!await this.$httpN.postB('appraisal/lrpresultrecord/synLRP')) return
      this.getRewardsList(true);
      this.getDeptList();
    }
  }
}
</script>

<style lang='scss' scoped>
.content-wrapper {
  min-width: 880px;
  height: calc(100vh - 20px);
  .nav {
    display: flex;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    justify-content: space-between;
    border-bottom: 1px solid #DCDFE6;
    .el-breadcrumb {
      display: flex;
      align-items: center;
      .el-breadcrumb__item {
        float: none;
      }
    }
  }
  .content {
    height: calc(100vh - 70px);
    .search-bar {
      padding: 0 20px;
      height: 50px;
      display: flex;
      align-items: center;
      .item {
        display: flex;
        align-items: center;
        margin-right: 10px;
      }
    }
    .main-content {
      padding: 0 20px;
      .page {
        height: 50px;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
      }
    }
  }
  .none {
    display: none;
  }
}
.dialog-style /deep/ .el-dialog__body {
  padding: 0;
  .el-table td, .el-table th {
    padding: 6px 0;
  }
}
.rewards-detail-wrapper {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 16px;
  color: #303334;
  .info {
    display: flex;
    flex-wrap: wrap;
    .info-item {
      margin-bottom: 20px;
      margin-right: 60px;
      span {
        color: #AEAEB0;
      }
    }
  }
  .rows {
    span {
      color: #AEAEB0;
    }
    margin-bottom: 20px;
  }
}
</style>